<template>
    <div>
        <view class="white-bg mtp wrap-progress">
            <view class="title-color fb-32"> 订单流程 </view>

            <view class="order-num-bg flex align-center">
                <view class="title-color f-28 limit-num-line">
                    订单编号：{{ dataInfo.order_sn }}
                </view>

                <view class="copy f-20" @click="onCopyOrderNum"> 复制 </view>
            </view>
            <view class="wrap-progress-list" v-if="dataInfo">
                <block v-for="(item, index) in lists" :key="index">
                    <view class="progress-item flex">
                        <view class="circle flex align-center just-center">
                            <view v-if="item.status <= dataInfo.status"></view>
                        </view>

                        <view class="progress-right">
                            <view class="one flex align-center">
                                <view class="title-color f-28">
                                    {{ item.title }}
                                </view>

                                <view
                                    class="status f-26"
                                    v-if="item.status > dataInfo.status"
                                >
                                    状态未开启
                                </view>
                            </view>

                            <view
                                class="time f-24"
                                v-if="item.status <= dataInfo.status"
                            >
                                {{ getAcceptTimeText(item.status) }}
                            </view>

                            <view
                                class="phone-bg"
                                v-if="
                                    (item.status == 5 || item.status == 10) &&
                                    item.status <= dataInfo.status
                                "
                                @click="
                                    $filters.onPreviewImage(
                                        [
                                            item.status == 5
                                                ? dataInfo.arrive_img
                                                : dataInfo.end_service_img,
                                        ],
                                        0
                                    )
                                "
                            >
                                <image
                                    v-if="item.status == 5"
                                    :src="dataInfo.arrive_img"
                                />
                                <image
                                    v-else-if="item.status == 10"
                                    :src="dataInfo.end_service_img"
                                />
                            </view>

                            <view
                                class="address-bg flex align-center"
                                v-if="
                                    (item.status == 4 ||
                                        item.status == 5 ||
                                        item.status == 10) &&
                                    item.status <= dataInfo.status
                                "
                                @click="onCheckAddress(item.status)"
                            >
                                <image
                                    :src="
                                        getImageURL(
                                            'technician/order/location.png'
                                        )
                                    "
                                />
                                <view class="f-24">
                                    {{ getAddressText(item.status) }}
                                </view>
                            </view>
                        </view>

                        <view class="line"></view>
                    </view>
                </block>
            </view>
        </view>
    </div>
</template>

<script>
/**
 * 这个是订单流程的组件
 */
export default {
    props: {
        /**
         * 详情数据
         */
        dataInfo: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            list: [
                { title: "服务师接单", status: 3 },
                { title: "服务师出发", status: 4 },
                { title: "服务师到达", status: 5 },
                { title: "开始服务", status: 6 },
                { title: "服务完成", status: 10 },
            ],
            list2: [
                { title: "服务师接单", status: 3 },
                { title: "开始服务", status: 6 },
                { title: "服务完成", status: 10 },
            ],
            lists: [],
        };
    },
    watch: {
        dataInfo: {
            handler(newVal, oldVal) {
                this.dataInfo.status = Number(this.dataInfo.status);
                if (newVal.is_upgrade == 1 || newVal.is_add == 1) {
                    this.lists = this.list2;
                } else {
                    this.lists = this.list;
                }
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        /**
         * 复制订单号
         */
        onCopyOrderNum() {
            uni.setClipboardData({
                data: this.dataInfo.order_sn,
                success: (success) => {
                    this.$st.show("复制成功");
                },
            });
        },
        /**
         * 查看地址
         */
        onCheckAddress(status) {
            let lat, lng, address;
            if (status == "4") {
                lat = this.dataInfo.trip_start_lat;
                lng = this.dataInfo.trip_start_lng;
                address = this.dataInfo.trip_start_address;
            } else if (status == "5") {
                lat = this.dataInfo.trip_end_lat;
                lng = this.dataInfo.trip_end_lng;
                address = this.dataInfo.trip_end_address;
            } else if (status == "10") {
                lat = this.dataInfo.service_complete_lat;
                lng = this.dataInfo.service_complete_lng;
                address = this.dataInfo.service_complete_address;
            }
            uni.openLocation({
                latitude: parseFloat(lat),
                longitude: parseFloat(lng),
                address: address,
            });
        },
        /**
         * 获取接单时间
         * 订单状态:-1=已取消,1=待支付,2=待服务,3=技师接单,4=技师出发,5=技师到达,6=服务中,10=已完成,8=技师拒单
         */
        getAcceptTimeText(status) {
            let time_text = "";

            const index = parseInt(status) - 1;
            const timeTextArray = [
                "",
                "",
                this.dataInfo.receiving_time_text,
                this.dataInfo.serout_time_text,
                this.dataInfo.arrive_time_text,
                this.dataInfo.start_service_time_text,
                this.dataInfo.end_service_time_text,
                "",
                "",
                this.dataInfo.end_service_time_text,
            ];

            if (index >= 0 && index < timeTextArray.length) {
                time_text = timeTextArray[index];
            }

            return time_text;
        },
        /**
         * 获取地址信息
         */
        getAddressText(status) {
            let address_text = "";

            const index = parseInt(status) - 1;
            const addressTextArray = [
                "",
                "",
                "",
                this.dataInfo.trip_start_address,
                this.dataInfo.trip_end_address,
                "",
                this.dataInfo.service_complete_address,
                "",
                "",
                this.dataInfo.service_complete_address,
            ];

            if (index >= 0 && index < addressTextArray.length) {
                address_text = addressTextArray[index];
            }

            return address_text;
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap-progress {
    width: 100%;
    overflow: hidden;
    background-color: white;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;

    .order-num-bg {
        margin-top: 30rpx;

        .copy {
            margin-left: 20rpx;
            width: 68rpx;
            height: 36rpx;
            line-height: 36rpx;
            text-align: center;
            color: $theme-color;
            border: 2rpx solid $theme-color;
            border-radius: 6rpx;
            overflow: hidden;
        }
    }
}
.wrap-progress-list {
    margin-top: 15rpx;
    width: 100%;
    overflow: hidden;

    .progress-item {
        width: 100%;
        padding: 15rpx 0;
        position: relative;
        z-index: 1;

        .line {
            position: absolute;
            left: 16rpx;
            top: 0rpx;
            bottom: 0rpx;
            width: 2rpx;
            background-color: $old-price-color;
            z-index: 2;
        }
        &:first-child .line {
            top: 30rpx !important;
        }
        &:last-child .line {
            bottom: none;
            height: 15rpx;
        }

        &:last-child {
            margin-bottom: 0rpx;
            padding-bottom: 0rpx !important;
        }

        .circle {
            width: 30rpx;
            height: 30rpx;
            border-radius: 50%;
            overflow: hidden;
            border: 2rpx solid $theme-color;
            background-color: white;
            position: relative;
            z-index: 3;

            > view {
                width: 20rpx;
                height: 20rpx;
                border-radius: 50%;
                background-color: $theme-color;
                overflow: hidden;
            }
        }

        .progress-right {
            margin-left: 16rpx;
            flex: 1;
            overflow: hidden;

            .one {
                width: 100%;
                height: 34rpx;
                overflow: hidden;

                .status {
                    margin-left: 20rpx;
                    color: $old-price-color;
                }
            }
            .time {
                margin-top: 20rpx;
                color: $old-price-color;
            }

            .phone-bg {
                margin-top: 20rpx;
                width: 196rpx;
                height: 196rpx;
                background-color: $old-price-color;
                border-radius: 20rpx;
                overflow: hidden;

                > image {
                    width: 100%;
                    height: 100%;
                }
            }

            .address-bg {
                margin-top: 20rpx;
                width: 100%;
                overflow: hidden;

                > image {
                    width: 20rpx;
                    height: 22rpx;
                }
                > view {
                    margin-left: 8rpx;
                    color: $theme-color;
                    line-height: 1.4em;
                }
            }
        }
    }

    .title-color {
        color: $title-color;
    }
}
</style>
